<template>
	<view>
		<navbar  title="店铺信息" :isGoBack="true" :isNotice="true" ></navbar>
		<view class="node-tab">
		        <view class="tab-item" :class="(currentTab == 1 ? 'active' : '')" :data-current="1" @click="changeNav">待投资</view>
		        <view class="tab-item" :class="(currentTab == 2 ? 'active' : '')" :data-current="2" @click="changeNav">待开业</view>
		        <view class="tab-item" :class="(currentTab == 3 ? 'active' : '')" :data-current="3" @click="changeNav">运营中</view>
		</view>
		
		
		    <!---支付信息-->
		    <view class="auth" v-if="isShow">
		      <view class="mask" catchtouchmove="preventTouchMove" v-if="isShow"></view>
		      <!-- 弹出层 -->
		      <view class="modalDlg" v-if="isShow">
		          <view class="title">
		              <text class="text0">店铺投资</text>
		          </view>
		          <view class="cartLeft"></view>
		        <!--  <u-image :lazy-load="true" width="150rpx" height="150rpx" :src="logo"></u-image> -->
		          <view class="name mt-30">
		              <text class="text1 ">支付金额：{{pay_money}} 元</text>
		          </view>
		          <!-- <view class="cartLeft1"></view> -->
		          <!-- <view class="content">
		              <text class="text2">{{userInfo.level_info.level_intro}}</text>
		          </view> -->
		          <view class="content mt-20">
		            <navigator url="/pages/cash-detail/index?type=invest"  open-type="navigate">
		                <text class="text mt-30" :style="{'color': main_color}">《店铺投资协议》</text>
		            </navigator>    
		          </view>
		          <view class="cartLeft2"></view>
		          <view class="but mt-20">
					<u-button type="primary" :plain="true"  text="取消" custom-style="width:160rpx"></u-button>
					<u-button type="primary" text="支付"  custom-style="width:160rpx" @click="(loading?'':getUserProfileUrl(payId))"></u-button>		             
		          </view>
		      </view>
		  </view>
		
		
		
		    <swiper class="tab-content"  duration="300" bindchange="changeTab" :style="{'height':winHeight+'px'}">
		        <!-- 全部 -->
		        <swiper-item>
		            <scroll-view :scroll-y="true" class="new-list-box" @scrolltolower="allLoadMore" scroll-top="scrollTop" scroll-with-animation :refresher-enabled="true" refresher-threshold="80" refresher-default-style="white" refresher-background="white" :refresher-triggered="triggered" @refresherrefresh="onAllRefresh">
		                <block v-if="allTabList.length > 0">
		
		                    <view class="new-list-item" v-for="(item,index) in allTabList" :key="index" v-if="(currentTab == 1 || currentTab == 2)">                                            
		                        <view class="item-tag dis-flex-between" v-if="(currentTab == 1 || currentTab == 2)">                    
		                            <view class="content-deadline mb-15 text-xsl">申请人：{{item.realname}}</view>
		                            <view class="content-deadline mt-20">店铺地址：{{item.address}}</view>  
		                            <view class="content-deadline mt-20">店铺图片： </view>   
		                            <image v-for="(images,index) in item.images"  class="grid-img" :src="images" @click="toPreviewImage(images)" 	mode="scaleToFill"></image>
		                            <view class="content-deadline mt-20">申请理由： {{item.content}}</view>                            
		                           <!-- <button class="cash_submit"   v-if="(currentTab == 1)" @click="dopay(item.id,item.pay_money)">支付</button> -->
		                        </view>
		                    </view>
		                  <view class="one_mian"  v-for="(item,index) in allTabList" :key="index" v-if="(currentTab == 3)">
		                    <view class="mian_left">
		                        <text class="mt-20 text-lg text-bold">{{item.storage_shop_name}}</text>
		                        <view class="mt-15 flex">
		                          <view class="main_tag" style="background: #2B91ED;margin-right: 10rpx;"><text>可外卖</text></view>
		                          <view class="main_tag" style="background: #2B91ED;"><text>可自取</text></view>
		                        </view>
		                        <view class="mt-15 text-xs flex flex-direction">
		                        <view><van-icon name="location-o" size="35rpx" /><text class="ml-10">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</text></view>
		                        <view class="mt-15"> <van-icon name="clock-o" size="35rpx"  /><text class="mt-15 ml-10">00:00-23:00</text></view>
		                        </view>
		                        <view class="mt-15 mb-20">
		                          <view>
		                              <van-button plain type="primary" size="mini" custom-style="margin-right:10rpx">营业中</van-button>
		                              <van-button  type="primary" size="mini">接受预定</van-button>
		                          </view>
		                        </view>
		                    </view>
		                    <view style="border-right: 1px solid #e2dede; margin-top: 30rpx; margin-bottom: 30rpx;margin-left: 10rpx;"></view>
		                    <view class="shop-right">
		                      <view class="mian_right">                          
		                          <text style="font-size: 25rpx;margin-top: 5rpx;">今日营业额</text>   
		                          <text class="text-bold" style="font-size: 25rpx;color: red;">￥{{item.day_order_money}}</text>                                            
		                        </view>
		                        <view class="mian_right">                          
		                          <text style="font-size: 25rpx;margin-top: 5rpx;">累计营业额</text>   
		                          <text class="text-bold" style="font-size: 25rpx;color: red;">￥{{item.order_money}}</text>                                            
		                        </view>
		                        <view class="mian_right">                          
		                          <text style="font-size: 25rpx; margin-top: 5rpx;">投资人昨日收益</text>  
		                          <text class="text-bold" style="font-size: 25rpx;color: red;">￥{{item.yest_gift_money}}</text>                                              
		                        </view>
		                        <view class="mian_right">                          
		                          <text style="font-size: 25rpx;margin-top: 5rpx;">投资人累计收益</text>   
		                          <text class="text-bold" style="font-size: 25rpx;color: red;">￥{{item.gift_money}}</text>                                            
		                        </view>
		                      </view>
		                  </view>    
		
		
		                </block>                
		            </scroll-view>
		        </swiper-item>       
		    </swiper>
		
		
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				 ...getApp().globalData.config,
				isShow:false,
				pay_money:0,
			    payId:0,
				currentTab:1,
				shopInfo:{},
				winHeight:'',
				allTabList:[],
				pageNo:1,
				triggered: false, 
				loading:false,
			}
	    },	
		onLoad() {
			let height = uni.getSystemInfoSync().windowHeight;
			this.winHeight = (height - 150);			
			this._requestPageList(true);
		},
		onShow() {
			
		},
		methods:{
			getUserProfileUrl(payId){
				let that=this
				    let obj_data={
				        token:uni.getStorageSync('userInfo').app_openid,
				        login_type:'app',
				        payId:this.payId
				    }
				    this.$http.dopayShop(obj_data).then(rest=>{
				      if(rest.resCode=="9999"){
				        let res = rest.data
				        that.loading=false
				        // console.log(res)
				        wx.requestPayment({
				          timeStamp: res.timeStamp,
				          nonceStr: res.nonceStr,
				          package: res.package,
				          signType: res.signType,
				          paySign: res.paySign,
				          success: res => {
				            // 支付成功，跳转到下一个页面
				            uni.showToast({
				              title: '操作成功',
				              icon: 'success',
				              duration: 2000,
				              //显示透明蒙层，防止触摸穿透
				              mask:true,
				              success: function () {
									setTimeout(function () {
									   //要延时执行的代码 			            
									   that.pageNo=1;
									   that.currentTab= 2;
									   that.allTabList=[];				                  
									   this._requestPageList(true);                   
									}, 1500) //延迟时间
				              }
				            })
				          },
				          fail: res => {
				            // 支付失败，展示支付失败提示
				            uni.showToast({
				              title: '支付失败',
				              icon: 'error',
				              
				            })
				            
				            that.isShow=false
				          }
				        })            
				      }else{
				        uni.showToast({title:rest.resMessage,icon:"none"})
				      }
				    })				   
				    this.isShow=false
			},
			  //拒接
			rejectInfo(){
			    this.isShow=false 
			},
			changeNav(e){
				let currentIndex = e.target.dataset.current;
				if (this.currentTab == currentIndex) {      
				    return false;
				} else {
				    this.pageNo=1;
					this.currentTab= currentIndex
				}
				this.allTabList=[];
				this._requestPageList(true);
			},
			// 参数
			_requestPageList(isLoadMore = false, callback) {
			  if(!isLoadMore){
				this.allTabList=[]; // 全部       
				this.pageNo= 1;				
			  }
			  let opt = {
				pageNo :this.pageNo,				
				token:uni.getStorageSync('userInfo').app_openid,
				login_type:'app',
				status:this.currentTab,
			  }    
			  this._requestPageListCom("virtualTaskList", opt, callback);
			},
			// 列表接口
			_requestPageListCom(url, params, callback) {    
			  this.$http.selectShopList(params).then(res => {
				if (res.resCode == "9999") {
				  let oldList = [];
				  oldList = this.allTabList;       
				  const newGoodsList = res.data.lists
				  const allData = [...oldList, ...newGoodsList]
				  // console.log(allData,'allData')     
				  this.allTabList=allData
				  this.recordCount=res.data.page
				  if(callback && typeof callback === 'function'){
					callback()
				  }
				}
			  })
			},
			// 上拉加载  滚动到底部/右边时触发
			allLoadMore(e){
				let _self = this;
				if (this._allLoadMore) return
				this._allLoadMore = true;
				this.pageNo= ++_self.pageNo				
				this._requestPageList(true, () => {
				  _self._allLoadMore = false;
				});
			},
			
			// 下拉刷新接口
			onAllRefresh() {
			 // 开启下拉自定义样式
				this.triggered = true;
			    this.pageNo=1;
				this._requestPageList(false, () => {
					// 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新
					this.triggered = false;
				});    
			},
			toPreviewImage(imagePath){
			    uni.previewImage({
			      urls: [imagePath], // 需要预览的图片http链接列表
			      current: '', // 当前显示图片的http链接
			    })
			},
			dopay(payId,pay_money){
			    let that=this
				this.isShow=true
				this.pay_money=pay_money
				this.payId=payId
			  },
			
		}
	}
</script>

<style>
	page{
	  background-color: #f3f6fb;
	}
	/* .inp-box{
	  padding:10rpx 20rpx 10rpx;
	  box-sizing: border-box;
	  position:relative;
	  background-color: #ffffff;
	} */
	.node-tab{
	  background-color: #ffffff;
	  height:88rpx;
	  font-size:28rpx;
	  line-height: 88rpx;
	  display: flex;
	}
	.node-tab .tab-item{
	  flex:1;
	  text-align: center;
	  color: #666;
	}
	.node-tab .active{
	  color: #ff6700;
	  position: relative;
	}
	.node-tab .active::before{
	  position:absolute;
	  content: " ";
	  bottom:10rpx;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 30rpx;
	    height: 6rpx;
	    background-color: #ff6700;
	    border-radius: 3rpx;
	}
	.tab-content{
	  margin-top:20rpx;
	}
	
	.no-data{
	  text-align: center;
	  box-sizing: border-box;
	  padding-top:230rpx;
	  color: #999999;
	}
	
	/* 更新样式 */
	.node-tab {
	  position: relative;
	}
	.new-list-box {
	  height: 100%;
	} 
	.new-list-item {
	  box-sizing:border-box;
	  /* height:260rpx; */
	  position: relative;
	  background-color: #fff;
	  margin-bottom: 20rpx;
	  padding: 20rpx 30rpx 0;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	}
	
	.new-list-item:last-child {
	  margin-bottom: 0;
	}
	
	.new-list-item view {
	  box-sizing: border-box;
	}
	
	.item-content {
	  display: flex;
	  justify-content: space-between;
	  border-bottom: 1rpx solid #eaeaea;
	  align-items: center;
	  position: relative;
	}
	
	.content-left {
	  width: 100%;
	  padding-bottom: 30rpx;
	}
	
	.content-left .content-title {
	  font-size: 32rpx;
	  color: #333;
	}
	
	.content-left .content-des {
	  font-size: 28rpx;
	  color: #666;
	  margin-top: 10rpx;
	}
	
	.content-deadline {
	  font-size: 24rpx;
	  color: #495060;
	}
	
	.content-right {
	  width: 130rpx;
	  flex-shrink: 0;
	  height: 48rpx;
	  border: 1rpx solid #ff6700;
	  color: #ff6700;
	  border-radius: 8rpx;
	  font-size: 24rpx;
	  text-align: center;
	  line-height: 48rpx;
	}
	
	.content-right-is-no {
	  opacity: 0.8;
	  border-color: #999;
	  color: #999;
	}
	
	.item-tag {
	  padding: 10rpx 0 10rpx;
	  font-size: 24rpx;
	}
	
	.list-tag-item {
	  padding: 5rpx 12rpx;
	  text-align: center;
	  background-color: #e5efff;
	  border-radius: 4rpx;
	  margin-right: 10rpx;
	  color: #ff6700;
	  border-radius: 8rpx;
	  margin-bottom: 10rpx;
	  font-size: 24rpx;
	}
	
	.content-right.bg-green {
	  background-color:#e6ffca;
	  border-color: #e6ffca;
	  color:#ff6700;
	  margin-right: 20rpx;
	}
	
	.exchange-btn{
	  text-align: center;
	  margin: 10px 0 0;
	}
	
	.dialog-box{
	  font-size: 28rpx;
	  padding: 30rpx 30rpx 0;
	}
	
	.textarea_css{
	  margin-top: 15rpx;
	  color: #333;
	  height: 160px;
	  border: 1px solid #999;
	  border-radius: 6rpx;
	  padding: 20rpx;
	}
	
	.grid-img{  
	  width: 200rpx;
	  height: 200rpx;
	  margin-left: 5rpx;
	  border-radius: 10rpx;
	  
	}
	
	.cash_submit{
	  height: 60rpx;
	  width: 100px;
	  background: #2B91ED;
	  color: #FFFFFF;
	  display: flex;    /*设置显示样式**/
	  flex-direction:column; /**子view排列方式row--水平 column--垂直*/
	  align-items: center;    /**子view垂直居中*/
	  vertical-align: center; /**垂直居中*/
	  justify-content: center; /**内容居中*/ 
	  border-radius: 50rpx !important;
	  font-size: 28rpx;
	  border: 1rpx solid #f3f3f3 !important;
	  margin-top: 20rpx;
	  margin-bottom: 10rpx;
	 
	}
	
	
	
	
	
	
	.auth {
	  width: 620rpx;
	  text-align: center;
	  animation: auth 2s;
	  -webkit-animation: auth 2s;
	
	}
	  .mask {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0;
	    left: 0;
	    background: #000;
	    z-index: 9000;
	    opacity: 0.5;
	  }
	
	  /* 弹出层 */
	  .modalDlg {
	    width: 70%;
	    height: 480rpx;
	    position: fixed;
	    top: 35%;
	    left: 0;
	    right: 0;
	    z-index: 9999;
	    margin: 0 auto;
	    background-color: #fff;
	    border-radius: 10rpx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	
	  }
	    .title {
	      margin-top: 20rpx;
	    }
	
	      .text0 {
	        text-align: center;
	        font-weight: bold;
	        font-size: 34rpx;
	        color: #000;
	      }
	    
	
	    .cartLeft {
	      width: 90%;
	      height: 20rpx;
	      border-bottom: 1rpx solid #f3ebeb;
	    }
	
	    .name {
	      margin-top: 10rpx;
	    }
	      .text1 {
	        text-align: center;
	        font-size: 32rpx;
	        color: #000;
	        width: 360rpx;
	      }
	    
	
	    .cartLeft1 {
	      width: 75%;
	      height: 20rpx;
	      border-bottom: 1rpx solid #f3ebeb;
	
	    }
	
	    .content {
	      margin-top: 20rpx;
	    }
	
	      .text2 {
	        text-align: center; 
	        font-size: 28rpx;
	        color: #AFACB3;
	      
	    }
	
	    .cartLeft2 {
	      width: 100%;
	      height: 20rpx;
	      border-bottom: 1rpx solid #f3ebeb;
	
	    }
	
	    .but {
	      width: 62%;
	      height: 18%;
	      display: flex;
	      justify-content: space-around;
	      align-items: center;
	    }
	      /* 弹出层里面的按钮 */
	      .not {
	        /* height: 60rpx;
	        background: #fff;
	        line-height: 10rpx;
	        text-align: center;
	        color: #44b549;
	        border: 1rpx solid gray; */
	        border-radius: 50rpx;
	
	      }
	      .ok {
	        height: 60rpx;
	        line-height: 10rpx;
	        text-align: center;
	        font-size: 30rpx;
	      }
	      
	      .button-service{
	        display: flex;
	        flex-direction: column;
	        font-size: 28rpx;
	        background-color: #fff;
	        border: none;
	        padding: 0;
	        margin-left: 1rpx;
	        line-height: 1;
	        border: none !important;
	      }
	      button::after{
	        border: none;
	    }
	
	
	    .one_mian{
	      display: flex;
	      flex-direction: row;
	      background-color: white;
	      margin:25rpx 0rpx 25rpx 25rpx;
	      border-radius:20rpx;
	    }
	    
	    .mian_left{
	      display: flex;
	      flex-direction: column;
	      margin-left: 25rpx;
	      width: 390rpx;
	    }
	    
	    .main_tag{
	      display: flex;
	      color: white;
	      width: 88rpx;
	      height: 36rpx;
	      font-size: 20rpx;
	      align-items: center;
	      vertical-align: center;
	      justify-content: center;
	      border-radius: 5rpx;
	    
	    }
	    
	    .mian_right{
	      display: flex;
	      flex-direction: row;
	      align-items: center;    /**子view垂直居中*/
	      vertical-align: center; /**垂直居中*/
	      justify-content: center; /**内容居中*/ 
	      margin-top: 10rpx;
	      
	    }
	    .localtion{
	    
	      display: flex;
	      flex-direction: row;
	      color: gray;
	      margin-top: 30rpx;
	    }
	    
	    .map-container{
	      margin: 30rpx;
	      background-color: white;
	    }
	    map{
	      width: 692rpx;
	    }
	
	    .shop-right{
	      display: flex;
	      flex-direction: column;
	      margin-left: 15rpx;
	      align-items: center;    /**子view垂直居中*/
	      vertical-align: center; /**垂直居中*/
	      justify-content: center; /**内容居中*/ 
	    }
</style>